<template>
	<view class="wrap">
		<u--form :model="form" ref="uForm" :rules="rules" labelPosition="left" labelWidth="80">
			<u-form-item label="密码:"  prop="password" borderBottom>
			    <u-input v-model="form.password" :focus="true" :clearable="true" :password="true" placeholder="请输入密码" border="none"/>
			</u-form-item>
			<u-form-item label="确认密码:"  prop="againPassword" borderBottom>
			    <u-input v-model="form.againPassword" :clearable="true" :password="true" placeholder="请再次输入密码" border="none"/>
			</u-form-item>
			<u-form-item label="验证码:"  prop="code" borderBottom>
			    <u-input v-model="form.code" placeholder="请输入验证码" border="none"/>
					<view slot="right" class="codeWrap"  @click="refreshCode">
						<mp-html class="code" :content="svg"></mp-html>
						<text class="change">换一张</text>
					</view>
				</u-input>
			</u-form-item>
		</u--form>
		<u-button text="保存密码" type="success" @click="submit"></u-button>
	</view>
</template>

<script>
	import {v4 as uuidv4} from 'uuid'
	export default {
		props:{
			mobile:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				form:{
					password:'',
					againPassword:'',
					code:''
				},
				svg:'',
				rules:{
					password:[
						{
							required: true,
							message: '请输入密码',
							trigger: ['blur', 'change'],
						},
						{
							min:6,
							message:'密码的长度至少6位',
							trigger:['blur','change']
						}
					],
					againPassword:[
						{
							required:true,
							message:'请输入密码',
							trigger:['blur','change']
						},
						{
							validator: (rule, value, callback) => {
								return value === this.form.password
							},
							message: '输入的密码不一致',
							trigger:['blur','change']
						}
					],
					code:[
						{
							required: true,
							message: '请输入验证码',
							trigger: ['blur', 'change'],
						},
						{
							len:4,
							message:'验证码长度4位',
							trigger:['blur','change']
						}
					]
				}
			};
		},
		computed: {
			sid() {
				return this.$store.state.auth.sid
			}
		},
		mounted(){
			if(!this.sid){
				this.$store.commit('setSid',uuidv4())
			}
			this.getCaptcha()
		},
		methods:{
			async getCaptcha(){
				const {code,data} = await this.$axios.api.getCaptcha({sid:this.sid})
				if(code === 200 ){
					this.svg = data
				}
			},
			refreshCode(){
				this.getCaptcha()
			},
			submit(){
				this.$refs.uForm.validate().then(async res=>{
					const {code,msg} = await this.$axios.api.addPassword({
						mobile:this.mobile,
						sid:this.sid,
						code:this.form.code,
						password:this.form.password
					})
					if(code === 200){
						uni.showToast({
							title:msg,
							icon:'success',
							duration:2000
						})
						this.$emit('passwordStatus',false)
						uni.showToast({
							title:'密码设置成功',
							icon:'error',
							duration:1000
						})
						setTimeout(() => {
						  uni.navigateBack({ delta: 2 })
						}, 1000)
					}else if(code ===401){
						uni.showToast({
							title:msg,
							icon:'none',
							duration:2000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.wrap{
	width: 100%;
	min-height: 500rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	.codeWrap{
		display: flex;
		flex-direction: column;
		align-items: center;
		.code{
			width: 180rpx;
			line-height: 60rpx;
		}
		.change{
			color: $u-success;
		}
	}
}

</style>
